<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" data-theme="light">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DaisyUI 组件示例</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="min-h-screen bg-base-100">
    <!-- 导航栏 -->
    <div class="navbar bg-base-100 shadow-lg">
        <div class="navbar-start">
            <div class="dropdown">
                <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
                    </svg>
                </div>
                <ul tabindex="0" class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
                    <li><a>首页</a></li>
                    <li><a>组件</a></li>
                    <li><a>关于</a></li>
                </ul>
            </div>
            <a class="btn btn-ghost text-xl">DaisyUI 示例</a>
        </div>
        <div class="navbar-center hidden lg:flex">
            <ul class="menu menu-horizontal px-1">
                <li><a>首页</a></li>
                <li><a>组件</a></li>
                <li><a>关于</a></li>
            </ul>
        </div>
        <div class="navbar-end">
            <div class="dropdown dropdown-end">
                <div tabindex="0" role="button" class="btn btn-ghost btn-circle">
                    <div class="indicator">
                        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1M2 5h12a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm8 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Z"/>
                        </svg>
                        <span class="badge badge-sm indicator-item">8</span>
                    </div>
                </div>
                <div tabindex="0" class="card card-compact dropdown-content bg-base-100 z-[1] mt-3 w-52 shadow">
                    <div class="card-body">
                        <span class="text-lg font-bold">8 个物品</span>
                        <span class="text-info">小计: ¥999</span>
                        <div class="card-actions">
                            <button class="btn btn-primary btn-block">查看购物车</button>
                        </div>
                    </div>
                </div>
            </div>
            <label class="swap swap-rotate">
                <input type="checkbox" class="theme-controller" value="dark" />
                <svg class="swap-off w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"/>
                </svg>
                <svg class="swap-on w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"/>
                </svg>
            </label>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="container mx-auto px-4 py-8">
        <!-- 英雄区域 -->
        <div class="hero min-h-96 bg-base-200 rounded-box mb-8">
            <div class="hero-content text-center">
                <div class="max-w-md">
                    <h1 class="text-5xl font-bold">欢迎来到 DaisyUI</h1>
                    <p class="py-6">这是一个展示 DaisyUI 组件的示例页面，包含了各种常用的 UI 组件。</p>
                    <button class="btn btn-primary">开始探索</button>
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="stats shadow w-full mb-8">
            <div class="stat">
                <div class="stat-figure text-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
                    </svg>
                </div>
                <div class="stat-title">总点赞数</div>
                <div class="stat-value text-primary">25.6K</div>
                <div class="stat-desc">21% 比上月增长</div>
            </div>

            <div class="stat">
                <div class="stat-figure text-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <div class="stat-title">页面浏览量</div>
                <div class="stat-value text-secondary">2.6M</div>
                <div class="stat-desc">21% 比上月增长</div>
            </div>

            <div class="stat">
                <div class="stat-figure text-secondary">
                    <div class="avatar online">
                        <div class="w-16 rounded-full">
                            <img src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" alt="Avatar" />
                        </div>
                    </div>
                </div>
                <div class="stat-value">86%</div>
                <div class="stat-title">任务完成率</div>
                <div class="stat-desc text-secondary">31 个任务已完成</div>
            </div>
        </div>

        <!-- 组件展示区域 -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
            <!-- 按钮组 -->
            <div class="card bg-base-100 shadow-xl">
                <div class="card-body">
                    <h2 class="card-title">按钮组件</h2>
                    <div class="space-y-4">
                        <div class="flex flex-wrap gap-2">
                            <button class="btn">默认</button>
                            <button class="btn btn-primary">主要</button>
                            <button class="btn btn-secondary">次要</button>
                            <button class="btn btn-accent">强调</button>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <button class="btn btn-success">成功</button>
                            <button class="btn btn-info">信息</button>
                            <button class="btn btn-warning">警告</button>
                            <button class="btn btn-error">错误</button>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <button class="btn btn-ghost">幽灵</button>
                            <button class="btn btn-link">链接</button>
                            <button class="btn btn-outline">轮廓</button>
                            <button class="btn btn-disabled" disabled>禁用</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 表单组件 -->
            <div class="card bg-base-100 shadow-xl">
                <div class="card-body">
                    <h2 class="card-title">表单组件</h2>
                    <div class="form-control w-full">
                        <label class="label">
                            <span class="label-text">用户名</span>
                        </label>
                        <input type="text" placeholder="请输入用户名" class="input input-bordered" />
                    </div>
                    <div class="form-control w-full">
                        <label class="label">
                            <span class="label-text">选择一个选项</span>
                        </label>
                        <select class="select select-bordered">
                            <option disabled selected>选择一个选项</option>
                            <option>选项 1</option>
                            <option>选项 2</option>
                            <option>选项 3</option>
                        </select>
                    </div>
                    <div class="form-control">
                        <label class="label cursor-pointer">
                            <span class="label-text">记住我</span>
                            <input type="checkbox" checked="checked" class="checkbox" />
                        </label>
                    </div>
                    <div class="form-control">
                        <label class="label cursor-pointer">
                            <span class="label-text">接收通知</span>
                            <input type="radio" name="radio-10" class="radio checked:bg-red-500" checked />
                        </label>
                    </div>
                </div>
            </div>

            <!-- 进度条和加载 -->
            <div class="card bg-base-100 shadow-xl">
                <div class="card-body">
                    <h2 class="card-title">进度条和加载</h2>
                    <div class="space-y-4">
                        <progress class="progress progress-primary w-full" value="40" max="100"></progress>
                        <progress class="progress progress-secondary w-full" value="70" max="100"></progress>
                        <progress class="progress progress-accent w-full" value="90" max="100"></progress>
                        <div class="flex items-center gap-4">
                            <span class="loading loading-spinner loading-sm"></span>
                            <span class="loading loading-dots loading-md"></span>
                            <span class="loading loading-ring loading-lg"></span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 警告框 -->
            <div class="card bg-base-100 shadow-xl">
                <div class="card-body">
                    <h2 class="card-title">警告框</h2>
                    <div class="space-y-4">
                        <div class="alert alert-info">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                            <span>这是一个信息提示。</span>
                        </div>
                        <div class="alert alert-success">
                            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <span>操作成功完成！</span>
                        </div>
                        <div class="alert alert-warning">
                            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4.5c-.77-.833-1.664-.833-2.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z" />
                            </svg>
                            <span>请注意这个警告信息。</span>
                        </div>
                        <div class="alert alert-error">
                            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <span>发生了一个错误！</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框示例 -->
        <div class="card bg-base-100 shadow-xl mt-8">
            <div class="card-body">
                <h2 class="card-title">模态框和其他组件</h2>
                <div class="flex flex-wrap gap-4">
                    <!-- 模态框触发器 -->
                    <button class="btn btn-primary" onclick="my_modal_1.showModal()">打开模态框</button>
                    <dialog id="my_modal_1" class="modal">
                        <div class="modal-box">
                            <h3 class="font-bold text-lg">你好！</h3>
                            <p class="py-4">这是一个模态框示例。按 ESC 键或点击外部区域关闭。</p>
                            <div class="modal-action">
                                <form method="dialog">
                                    <button class="btn">关闭</button>
                                </form>
                            </div>
                        </div>
                    </dialog>

                    <!-- 工具提示 -->
                    <div class="tooltip" data-tip="这是一个工具提示">
                        <button class="btn">悬停查看提示</button>
                    </div>

                    <!-- 折叠面板 -->
                    <div class="collapse collapse-arrow bg-base-200">
                        <input type="radio" name="my-accordion-2" checked="checked" />
                        <div class="collapse-title text-xl font-medium">
                            点击展开内容
                        </div>
                        <div class="collapse-content">
                            <p>这里是折叠面板的内容。可以放置任何你想要的内容。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 表格示例 -->
        <div class="card bg-base-100 shadow-xl mt-8">
            <div class="card-body">
                <h2 class="card-title">表格组件</h2>
                <div class="overflow-x-auto">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>
                                    <label>
                                        <input type="checkbox" class="checkbox" />
                                    </label>
                                </th>
                                <th>姓名</th>
                                <th>职位</th>
                                <th>最喜爱的颜色</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th>
                                    <label>
                                        <input type="checkbox" class="checkbox" />
                                    </label>
                                </th>
                                <td>
                                    <div class="flex items-center gap-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://img.daisyui.com/images/profile/demo/2@94.webp" alt="Avatar" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">张三</div>
                                            <div class="text-sm opacity-50">中国</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    Zemlak, Daniel and Leannon
                                    <br/>
                                    <span class="badge badge-ghost badge-sm">桌面支持技术员</span>
                                </td>
                                <td>紫色</td>
                                <th>
                                    <button class="btn btn-ghost btn-xs">详情</button>
                                </th>
                            </tr>
                            <tr>
                                <th>
                                    <label>
                                        <input type="checkbox" class="checkbox" />
                                    </label>
                                </th>
                                <td>
                                    <div class="flex items-center gap-3">
                                        <div class="avatar">
                                            <div class="mask mask-squircle w-12 h-12">
                                                <img src="https://img.daisyui.com/images/profile/demo/3@94.webp" alt="Avatar" />
                                            </div>
                                        </div>
                                        <div>
                                            <div class="font-bold">李四</div>
                                            <div class="text-sm opacity-50">美国</div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    Carroll Group
                                    <br/>
                                    <span class="badge badge-ghost badge-sm">税务会计师</span>
                                </td>
                                <td>红色</td>
                                <th>
                                    <button class="btn btn-ghost btn-xs">详情</button>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 徽章和标签 -->
        <div class="card bg-base-100 shadow-xl mt-8">
            <div class="card-body">
                <h2 class="card-title">徽章和标签</h2>
                <div class="space-y-4">
                    <div class="flex flex-wrap gap-2">
                        <div class="badge">默认</div>
                        <div class="badge badge-primary">主要</div>
                        <div class="badge badge-secondary">次要</div>
                        <div class="badge badge-accent">强调</div>
                        <div class="badge badge-ghost">幽灵</div>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <div class="badge badge-outline">轮廓</div>
                        <div class="badge badge-primary badge-outline">主要轮廓</div>
                        <div class="badge badge-secondary badge-outline">次要轮廓</div>
                        <div class="badge badge-accent badge-outline">强调轮廓</div>
                    </div>
                    <div class="flex flex-wrap gap-2">
                        <div class="badge badge-info gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                            信息
                        </div>
                        <div class="badge badge-success gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                            成功
                        </div>
                        <div class="badge badge-warning gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                            警告
                        </div>
                        <div class="badge badge-error gap-2">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                            错误
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer footer-center bg-base-200 text-base-content rounded p-10 mt-16">
        <nav class="grid grid-flow-col gap-4">
            <a href="{{ route('about') }}" class="link link-hover">关于我们</a>
            <a class="link link-hover">联系方式</a>
            <a class="link link-hover">工作机会</a>
            <a class="link link-hover">新闻</a>
        </nav>
        <nav>
            <div class="grid grid-flow-col gap-4">
                <a><svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg></a>
                <a><svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/></svg></a>
                <a><svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg></a>
            </div>
        </nav>
        <aside>
            <p>版权所有 © {{ date('Y') }} - 由 DaisyUI 强力驱动</p>
        </aside>
    </footer>

    <script>
        // 主题切换功能
        const themeController = document.querySelector('.theme-controller');
        if (themeController) {
            themeController.addEventListener('change', function() {
                const theme = this.checked ? 'dark' : 'light';
                document.documentElement.setAttribute('data-theme', theme);
                localStorage.setItem('theme', theme);
            });

            // 加载保存的主题
            const savedTheme = localStorage.getItem('theme');
            if (savedTheme) {
                document.documentElement.setAttribute('data-theme', savedTheme);
                themeController.checked = savedTheme === 'dark';
            }
        }
    </script>
</body>
</html>
